<template>
	<view class="index" v-if="allStories">
		<!-- 		<view class="head">
			<uni-nav-bar left-icon="info" title="首页" ></uni-nav-bar>
		</view> -->
		<view class="section" v-for="(day,index) in allStories" :key="day.date">
			<view class="section-title" v-if="index == 0">
				<view class="bigbox">
				<view>
					<image class="icon-bot" src="../../static/myself.png" @click="myself"></image>
				</view>
				<view class="borders"></view>
				<view class="date">
					<!-- <text class="month">{{adate}}月</text> -->
					<text class="month">{{day.date.slice(5,6)}}月</text>
					<text class="day">{{day.date.slice(6,8)}}日</text>
					<view class="hello">
						<text class="lefthellow">Hellow!</text>{{hello}}
					</view>
				</view>
				</view>
				
				<view class="head">
					<view class="header"></view>
				</view>
			</view>
			<template v-if="day.top_stories">
				<swiper class="swiper" :indicator-dots="true" :autoplay="true" :circular="true"
					indicator-color="rgba(255,255,255,0.5)" indicator-active-color="rgba(255,255,255,.9)">
					<swiper-item v-for="story in day.top_stories" :key="story.id" style="position: relative;" @click="navToDetail(story.id)">
						<image :lazy-load="true" :src="story.image" mode="widthFix" style="width: 750rpx;"></image>
						<view class="mask"
							:style="{backgroundImage: `linear-gradient(to bottom, transparent, ${story.image_hue.replace('0x','#') + 'df'} 40%)`}">
							<view class="title">{{story.title}}</view>
							<view class="hint">{{story.hint}}</view>
						</view>
					</swiper-item>
				</swiper>
			</template>

			<view class="stories-list" v-if="day.stories">
				<StoryItem v-for="story in day.stories" :story="story" />
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				adate: new Date().toISOString().slice(0, 10),
				allStories: [],
				bannerHeight: 300,
				hello:'你好',
				readHistory: uni.getStorageSync('ReadHistory') || [],
			}
		},
		onLoad() {
			this.getStories();
			this.getTimeNow();
		},
		onReachBottom() {
			this.getMoreStories()
		},
		methods: {
			getStories: function() {
				uni.showToast({
					title: "加载中",
					icon: "loading"
				})
				uni.request({
					url: "https://apis.netstart.cn/zhihudaily/stories/latest",
					success: (res) => {
						this.allStories = [res.data]
					},
					complete: () => {
						uni.hideToast()
						console.log(this.allStories);
					}
				})
			},

			getMoreStories: function() {
				if (this.allStories.length) {
					uni.showToast({
							title: "加载中",
							icon: "loading"
						}),
						uni.request({
							url: "https://apis.netstart.cn/zhihudaily/stories/before/" + this.allStories[this
								.allStories.length - 1].date,
							success: (res) => {
								this.allStories = [...this.allStories, res.data]
							},
							complete: () => {
								uni.hideToast()
							}
						})
				}
			},
			
			getTimeNow:function(){
				let hour = new Date().getHours();
				if( hour >=6 && hour<=11){
					this.hello='早上好!';
				}else if( hour>11 && hour<=14){
					this.hello="中午好!";
				}else if(hour >14 && hour<=18){
					this.hello="下午好!";
				}else if((hour >18 || hour<=1) ){
					this.hello="晚上好!";
				}
				else if((hour>1 || hour<6)){
					this.hello='凌晨了，该休息了！'
				}
			},
			
			navToDetail: function(id) {
				// console.log(uni.getStorageSync('ReadHistory') || [], id);
				const old = uni.getStorageSync('ReadHistory') || [];
				old.push(id);
				uni.setStorageSync('ReadHistory', old);
				this.readHistory=[id,...this.readHistory];
				uni.setStorageSync("ReadHistory",this.readHistory);
				uni.navigateTo({
					url:"../../pages/detail/detail?id="+id
				})
			},
			
			myself(){
				uni.navigateTo({
					url:"../me/me"
				})
			}
		}
	}
</script>

<style lang="less">
	
	.index {
		padding-top: 20rpx;
		.section {
			position: relative;
			.section-title {
				padding: 30rpx;
				// display: flex;
				align-items: center;
				
				// &::after {
				// 	content: '';
				// 	display: block;
				// 	height: 1rpx;
				// 	background-color: lightgray;
				// 	flex: 1;
				// 	margin-left: 20rpx;
				// }
				.date {
					margin:0 auto;
					text-align: center;
					padding-right: 60rpx;
					.day{
						font-size: 30rpx;
						
					}
					.month{
						font-size: 50rpx;
					}
				}
				.hello{
					margin-left: 30rpx;
					text-align: center;
					font-size: 30rpx;
				}
				.icon-bot {
					// border-left: 5rpx solid #ccc;
					width: 50rpx;
					height: 50rpx;
					margin-top: 50%;
				}
				
			}

			.swiper {
				height: 750rpx;

				.mask {
					position: absolute;
					bottom: 0;
					left: 0;
					z-index: 9;
					width: 690rpx;
					height: 200rpx;
					padding: 30rpx;
					color: white;
					display: flex;
					flex-direction: column;
					justify-content: flex-end;

					.title {
						font-size: 36rpx;
						font-weight: 600;
					}

					.hint {
						font-size: 28rpx;
						font-weight: 300;
						line-height: 2em;
					}

				}
			}

			.stories-list {
				
			}
			.bigbox{
				display: flex;
				
			}
			.borders{
				border-left: 5rpx solid #ccc;
				margin-left: 20rpx;
			}
			.lefthellow{
				margin-right: 10rpx;
				font-size: 40rpx;
			}
		}
	}
</style>
